<!--
 * @Author: your name
 * @Date: 2021-12-27 20:21:38
 * @LastEditTime: 2022-01-01 20:35:18
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \briup-wisdom-order\src\views\Home\home.vue
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <div class="search">
        <van-sticky>
          <van-search
            shape="round"
            v-model="search"
            show-action
            placeholder="请输入你想搜索商品的关键字"
            @search="onSearch"
          >
            <template #action>
              <!-- <div @click="onSearch(search)">搜索</div> -->
              <div class="searchPro">
                <van-button
                  color="#7232dd"
                  round
                  @click="onSearch(search)"
                  size="small"
                  >搜索</van-button
                >
              </div>
            </template>
          </van-search>
        </van-sticky>
      </div>
    </div>
    <!-- <div style="100px"></div> -->
    <!-- 轮播 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeData" :key="item.id">
          <img
            :src="item.url"
            alt="商品推荐"
            title="推荐商品"
            @click="toProductLine(1,9450)"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单 -->
    <div class="category">
      <van-grid :column-num="4">
        <van-grid-item
          v-for="item in categoryData"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
          @click="toProductPage(item)"
        />
      </van-grid>
    </div>
    <!-- 产品展示 -->
    <!-- 产品数据 -->
          <!-- {{productData[0]}} -->
  <div class="productdata">
    <div class="productShow" v-if="productData[0]">
      <van-card
        v-for="item in productData"
        :key="item.id"
        tag="折扣"
        :price="item.price + '.00'"
        :desc="item.description"
        :title="item.name"
        :thumb="item.photo"
        :origin-price="item.price + 10.0"
        @click="searchProDate(item)"
      >
        <template #tags>
          <van-tag plain type="danger">热销</van-tag>
        </template>
      </van-card>
    </div>
    
    <!-- 找不到产品 -->
    <div class="productMiss" v-else>
        <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="搜索失败,找不到该商品"
      />
    </div>
    
      </div>
    <van-action-sheet v-model="show" title="商品详情" style="height: 70%">
      <!-- 定义结构 -->
      <div class="productImg">
        <!-- 图片 -->
        <div class="proImg">
          <img :src="imgUrl" alt="商品图片" title="商品图片" />
        </div>
        <div class="proName">{{ name }}</div>
        <div class="proDes">
          <span style="font-size: 15px"
            ><p></p>
            简介:</span
          >
          {{ description }}
        </div>
      </div>
      <div style="height: 55px"></div>
      <!-- 底部购物车 -->
      <div class="proLine">
        <van-goods-action>
          <!-- <div :class="{commend: isActive}">
            11
            <van-button icon="star" @click="recommend"  ></van-button>
          </div> -->
          <van-goods-action-icon
            icon="thumb-circle"
            :text="rcd"
            :color="rcdcolor"
            @click="recommend"
          />
          <van-goods-action-icon
            icon="like"
            :text="col"
            :color="colcolor"
            @click="collect"
          />
          <div style="color: red; font-size: 20px">￥{{ price }}</div>
          <van-goods-action-button
            color="#7232dd"
            type="danger"
            text="立即购买"
            @click="toProductLine(num, id)"
          />
        </van-goods-action>
        <div style="height: 10px"></div>
      </div>
    </van-action-sheet>
    <div style="height: 50px"></div>
  </div>
</template>
<script>
// 引入axios
import { get, post } from "@/http/axios";
import { mapActions, mapState } from "vuex";
import { Search } from "vant";
export default {
  data() {
    return {
      tip: "",
      search: "",
      swipeData: {},
      num: "",
      show: false,
      actionTitle: "",
      imgUrl: "",
      price: "",
      description: "",
      name: "",
      unit: "",
      // 推荐
      rcd: "推荐",
      isActive: true,
      rcdcolor: "",
      colcolor: "",
      col: "收藏",
      id: "",
    };
  },
  created() {
    // 页面加载获取数据
    this.getSwipeData();
    // 获取栏目数据
    this.getCategoryDataVuex({ page: 1, pageSize: 200 });
    this.getProductDataVuex({ page: 1, pageSize: 7 ,status:'正常'});
  },
  methods: {
    // 搜索
    onSearch(search) {
      // this.getProductDataVuex({ page: 1, pageSize: 7, name: search }).then(
      //   (res) => {
      //     console.log(res,'找到数据了');
      //     if (!res) {
      //       console.log("没有数据");
      //       this.tip = "加载失败";
      //     } else {
      //       console.log(res,'找到数据了');
      //       this.tip = "";
      //     }
      //     // console.log(res);
      //   }
      // );
      this.getProductDataVuex({ page: 1, pageSize: 7, name: search });
      // console.log(productData,'搜索数据');
      // if( this.getProductDataVuex({ page: 1, pageSize: 7, name: search }))
    },
    // 获取所有轮播图数据
    async getSwipeData() {
      //  发送网络请求
      let res = await get("/carousel/findAll");
      //  console.log(res);
      //  对应数据赋值
      this.swipeData = res.data.data;
    },
    searchProDate(proObj) {
      this.show = true;
      this.actionTitle = proObj.name;
      this.imgUrl = proObj.photo;
      this.name = proObj.name;
      this.description = proObj.description;
      this.price = proObj.price;
      this.unit = proObj.unit;
      this.id = proObj.category.id;
      this.num = proObj.category.num;
    },
    toProductPage(category) {
      this.$router.push({
        path: "/manager/product",
        query: {
          activeKey: category.num - 1,
          productCategoryId: category.id,
        },
      });
    },
    // 图标相关
    recommend() {
      if (this.rcdcolor == "#ffd21e") {
        this.rcdcolor = "";
        this.rcd = "推荐";
      } else {
        this.rcdcolor = "#ffd21e";
        this.rcd = "已推荐";
      }
    },
    collect() {
      if (this.colcolor == "red") {
        this.colcolor = "";
        this.col = "收藏";
      } else {
        this.colcolor = "red";
        this.col = "已收藏";
      }
    },
    // 购物车
    toProductLine(num, id) {
      console.log(num, id);
      this.$router.push({
        path: "/manager/product",
        query: {
          activeKey: num - 1,
          productCategoryId: id,
        },
      });
    },
    ...mapActions("category", ["getCategoryDataVuex"]),
    ...mapActions("product", ["getProductDataVuex"]),
  },

  computed: {
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
  },
};
</script>

<style scoped>
.commend {
  color: red;
}

.swipe img {
  width: 100%;
  height: 300rpx;
}

.van-action-sheet {
  height: 400px;
}
.productImg img {
  /* /* margin-top: 20px;  */
  width: 70%;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  /* height: 200px; */
  /* height: 150px; */
}
.proImg {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*推荐样式 */
/* .commend{
  background-color:#ff5000;
} */
/* 字体 */
.proName {
  margin-left: 10px;
  margin-top: 15px;
  font-weight: bold;
}
.proDes {
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 13px;
}
.searchPro {
  margin-bottom: 8px;
  margin-left: 0px;
}
.search {
  /* display: flex; */
  /* height: 100px;  */
  /* position: fixed; */
}
/* .productImg {
  height: 20px;
} */
</style>